<template>
  <div class="words">
    <div class="hotword">
      <span
        v-for="keywords in hotWords"
        :key="keywords"
        @click="$emit('changekeyword', keywords)"
      >
        {{ keywords }}</span
      >
    </div>
    <div class="history"></div>
  </div>
</template>
<script>
export default {
  props: {
    id: Number,
    keywords: String,
  },
  data() {
    return {
      isSearch: false,
      hotWords: ["洗衣机", "耳机", "手机", "小黄鸭"],
    };
  },
  // created() {
  //   this.axios.get("/products").then((result) => {
  //     this.hotWords = result.data.slice(0, 10);
  //   });
  // },
};
</script>
<style scoped lang="less">
.words {
  overflow: hidden;
  span {
    float: left;
    font-size: 14px;
    line-height: 16px;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 5px;
    color: #535353;
    border: 1px solid #00000029;
    background-color: white;
  }
}
</style>